<template>
  <PageContainer>
    <view class="container">
      <Header title="报名记录">
        <CapsuleTabs
          v-model:current="capsuleTabsCurrent"
          :list="capsuleTabsList"
          @change="handleCapsuleTabsChange"
        />
      </Header>
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
      >
        <template v-for="(v, i) in dataList" :key="i">
          <view class="activity-item">
            <OrderItem v-if="capsuleTabsCurrent === 0" :item="v" @refresh="refresh()" />
            <MyActivityListItem v-else :item="v" @refresh="refresh" />
          </view>
        </template>
      </Paglist>
      <TButtonGroup
        v-if="routerParam?.isBuyTicket"
        :styles="{
          backgroundColor: '#fff',
          boxShadow: '0px -4rpx 24rpx 0px rgba(150, 151, 153, 0.16)',
        }"
      >
        <TButton
          class="gutter-btn"
          custom-class="br-22"
          text="继续报名"
          type="primary"
          @click="toBuyTickets"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* registrationRecord 报名记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import type { IActivityListData, IActivityListResData } from '@/api/activity/types';
  import { reactive, ref, provide } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import MyActivityListItem from '../components/MyActivityListItem.vue';
  import { appUserOrderActivityPageList, myActivityPageList } from '@/api/activity';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { RegistrationRecord } from '@/router/types/modules';
  import CapsuleTabs from '@/components/CapsuleTabs/index.vue';
  import OrderItem from '../../components/OrderItem.vue';
  import { useActivityStore } from '@/store/modules/activity';
  import { toActivityRegistration } from '../../utils';

  const capsuleTabsList = ['报名记录', '我的报名'];
  const capsuleTabsCurrent = ref(0);

  const { getActivityOrderRouteParams } = useActivityStore();

  function handleCapsuleTabsChange(index: number) {
    refresh();
  }

  const parame = reactive<Partial<IActivityListData>>({
    current: 1,
    size: 10,
    activityId: getActivityOrderRouteParams?.id,
  });

  provide('api', (obj: any) => {
    return capsuleTabsCurrent.value === 0
      ? appUserOrderActivityPageList(obj)
      : myActivityPageList(obj);
  });

  const dataList = ref<any[]>([]);

  const [register, { refresh }] = useConList();

  const routerParam = ref<RegistrationRecord>();
  onLoad<'registrationRecord'>((op) => {
    routerParam.value = op;
    refresh();
  });

  function toBuyTickets() {
    if (routerParam.value) {
      const { shareKey } = routerParam.value;
      if (getActivityOrderRouteParams) {
        toActivityRegistration({
          data: getActivityOrderRouteParams,
          shareKey: shareKey,
          isVerifyNumber: true,
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .activity-item {
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      &:nth-child(1) {
        padding-top: 30rpx;
      }
    }
  }
</style>
